require('../../less/controls/popup_manager.less');
var React = require('react');
var Dialog = require('./Dialog');
var ButtonGroup = require('./ButtonGroup');

module.exports = React.createClass({
	displayName:'PopupManager',
	getInitialState:function(){
		return {
			mask: false,
			active: false
		}
	},
	componentDidMount:function(){
		this._count = 0;
		window.Popup = this;
		window.addEventListener('click', function (e) {
			this.setBottomView(null);
		}.bind(this), false);
	},
	setBottomView: function (bottomView){
		if(window.Popup.bottomView){
			window.Popup.bottomView.active(false);
		}
		window.Popup.bottomView = bottomView;
	},
	popup: function (type, view){
		this._count++;
		var _state = {
			mask: true,
			active: true
		};
		_state[type] = view;
		this.setState(_state);
	},
	close: function (type, argv){
		this._count--;
		var _state = {
			mask: false,
			active: (this._count ? true : false)
		};
		_state[type] = null;
		this.setState(_state);
	},
	message: function (argv) {
		this.setState({
			message: <div className={'message ' + (argv.type||'default')}>{argv.content}</div>,
			mask: argv.mask,
			active: true
		});
		var _destory = function () {
			this.setState({
				message: null,
				mask: false,
				active: false
			});
		}.bind(this);
		if(argv.callback){
			argv.callback(_destory);
		}else {
			setTimeout(_destory, argv.delay || 1000);
		}
	},
	confirm: function (argv) {
		var _key = 'confirm',
			_width = argv.width || 300,
			_style = argv.style || {};

		_style.width = _style.width || _width;
		_style.marginLeft = -(_width/2);
		this.popup(_key, <Dialog
			title={argv.title||"Confirm Dialog"}
			hHeight={argv.hHeight||38}
			style={_style}
			enableClose={true}
			skin={_key}
			onClose={()=>this.close(_key, argv)}>
			<div>
				<div className="content">{argv.content}</div>
				<ButtonGroup items={[
					{ text: 'Cancle', width: '47%', float: 'left', status: 'danger', onClick: function (){ this.close(_key, argv); argv.onCancle && argv.onCancle(); }.bind(this) },
					{ text: 'Confirm', width: '46%', float: 'right', onClick: function (){ this.close(_key, argv);argv.onConfirm && argv.onConfirm(); }.bind(this) }
				]} />
			</div>
		</Dialog>);
	},
	dialog: function (argv, render) {
		var _key = 'dialog',
			_width = argv.width || 400,
			_style = argv.style || {};

		_style.width = _style.width || _width;
		_style.marginLeft = -(_width/2);
		this.popup(_key, <Dialog
			title={argv.title}
			hHeight={argv.hHeight||38}
			style={_style}
			enableClose={true}
			onClose={()=>this.close(_key, argv)}>
			{argv.content||(render&&render())}
		</Dialog>);
	},
	render:function(){
		return (
			<div className="c-pop-manager" data-active={this.state.active} data-mask={this.state.mask}>
				<div className="mask bg_blur" style={{ zIndex: this.state.maskZIndex }}></div>
				<div className="pop-view">{this.state.dialog}</div>
				<div className="pop-view">{this.state.confirm}</div>
				<div className="pop-view">{this.state.message}</div>
			</div>
		);
	}
});
